<template>
  <div class="search-container">
    <form action="/">
      <van-search
        :placeholder="hotword"
        show-action
        @cancel="$router.back()"
        v-model="value"
        @input="onSearchInput"
        @search="onSearch"
      />
    </form>
    <!-- trim 去掉字符串的前后空格 -->
    <!-- 搜索结果 -->
    <div v-show="value.trim().length">
      <van-cell
        :title="item.title"
        @click="searchResultTap(item.title)"
        v-for="item in searchResult"
        :key="item._id"
      >
      </van-cell>
    </div>
    <!-- 历史记录 -->
    <div class="search-history">
      <van-cell title="搜索历史">
        <div @click="clear">
          <span>全部删除</span>
          <span>完成</span>
          <br>
          &nbsp;&nbsp;
          
          <van-icon name="delete" />
        </div>
      </van-cell>
      <van-cell
        :title="item"
        @click="historyTap(item)"
        :key="item"
        v-for="(item, index) in searchHistory"
      >
        <van-icon @click.stop="del(index)" name="close" />
      </van-cell>
    </div>
    <!-- /历史记录 -->
  </div>
</template>

<script>
import search from "./search";
export default search;
</script>

<style lang="less">
span{
  margin-left: 10px;
}
</style>